<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
</head>
<body>
<div id="box">
    <aaa></aaa>
    <template id="aaa">
        <h1>11111</h1>
        <bbb :mmm="msg2" :my-msg="msg"></bbb>
    </template>
</div>
</body>
<script type="text/javascript" src="../lib/vue.js"></script>
<script>
var vm=new Vue({
    el:'#box',
    data:{
        msg:'hello'
    },
    components:{
        'aaa':{
            data(){
                return {
                    msg:12345678,
                    msg2:'我是父组件的数据',
                }
            },
            template:'#aaa',
            components:{
                'bbb':{
                    //注意js语法规则，需要驼峰式命名,也就是说，如果在html里边是带横杠(-)的属性，那么在js里边必须将其转化为驼峰式命名
                    props:['mmm','myMsg'],
                    template:'<h3>我是bbb组件->{{mmm}}--{{myMsg}}</h3>'
                }
            }
        }
    }
});

</script>
</html>